<template>
  <div class="container">

    <!--头部操作-->
    <div class="header-box">
      <div class="left">
        <el-button type="primary" size="small" icon="el-icon-arrow-left" plain @click="goBack">返回</el-button>
      </div>
      <div class="right">
        <!--<el-button type="primary" size="small" :disabled="editable" @click="handleSave">暂存</el-button>-->
        <el-button type="success" size="small" :disabled="editable" @click="handleSave">提交</el-button>
      </div>
    </div>
    <!--头部操作-->

    <!--基本信息-->
    <card title="基本信息">
      <div class="context-warp">
        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>项目名称</span>
          </label>
          <div class="page-form-item-content">
            <!--<el-select v-model="baseData.projectName" :disabled="editable" clearable filterable remote placeholder="请输入项目名称查询" :remote-method="getProjectList" @change="handleProjectChange">
              <el-option :label="item.projectName" :value="item.projectId" :key="item.projectId" v-for="item in projectList"></el-option>
            </el-select>-->
            <zb-form-select-data v-bind="option" v-model="baseData.projectName" :disabled="editable" @dataChange></zb-form-select-data>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">猪场编码</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.pigfarmNumber" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>合同名称</span>
          </label>
          <div class="page-form-item-content">
            <el-select v-model="baseData.contractTitle" :disabled="editable" clearable filterable @change="handleContractChange">
              <el-option :label="item.contractTitle" :value="item.id" :key="item.id" v-for="item in contractList"></el-option>
            </el-select>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>合同类型</span>
          </label>
          <div class="page-form-item-content">
            <el-select v-model="baseData.contractType" :disabled="editable">
              <el-option label="设备" value="1"></el-option>
              <el-option label="水电" value="2"></el-option>
              <el-option label="土建" value="3"></el-option>
            </el-select>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>付款类型</span>
          </label>
          <div class="page-form-item-content">
            <el-select v-model="baseData.payType" disabled @change="handelChangePayType">
              <el-option label="竣工款" value="1"></el-option>
              <el-option label="结算款" value="2"></el-option>
              <el-option label="质保金" value="3"></el-option>
            </el-select>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">合同金额(元)</span>
          </label>
          <div class="page-form-item-content">
            <el-input type="number" v-model.trim="baseData.contractMoney" :min="0" :max="999999999999" disabled></el-input>
          </div>
        </div>
        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">合同甲方</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.companyName" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">合同乙方</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.supplierName" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">账户名称</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.bankAccountName" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">银行卡号</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.bankAccount" disabled></el-input>
          </div>
        </div>
        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">开户银行</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.bankName" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">银行行号</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.bankCode" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item" style="width: 100%;height: 100px;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>摘要信息</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.remark" type="textarea" :disabled="editable" maxLength="128"></el-input>
          </div>
        </div>

        <div class="page-form-item" style="width: 100%;height: 150px;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;"></i>附件</span>
          </label>
          <div class="page-form-item-content">
            <FileUpload v-model='baseData.fileList' :limit="3" :disabled="editable " />
          </div>
        </div>

      </div>
    </card>
    <!--基本信息-->


    <!--支付信息-->
    <card title="支付信息">
      <div class="context-warp">
        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>本次申请金额(元)</span>
          </label>
          <div class="page-form-item-content">
            <el-input type="number" v-model.trim="baseData.thisMoney" :disabled="editable"  :min="0"
                      @blur="handleBlur"
                      onKeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode)))"></el-input>
          </div>
        </div>
        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">累计申请金额(元)</span>
          </label>
          <div class="page-form-item-content">
            <el-input type="number" v-model.trim="baseData.totalApply" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">已支付金额(元)</span>
          </label>
          <div class="page-form-item-content">
            <el-input type="number" v-model.trim="baseData.totalPaid" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">本次实际支付金额(元)</span>
          </label>
          <div class="page-form-item-content">
            <el-input type="number" v-model.trim="baseData.actualMoney" disabled></el-input>
          </div>
        </div>
      </div>
    </card>
    <!--支付信息-->

    <card title="关联流程" v-if="baseData.payType == '1' ||  baseData.payType == '2'">
      <el-table
        ref="multipleTable"
        :data="bpmDataList"
        border
        size="mini"
        style="width: 100%">
        <el-table-column label="关联" align="center" width="80" >
          <template slot-scope="scope">
            <el-checkbox :disabled="editable" :true-label='1' :false-label='0' v-model="scope.row.flag"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="bpmTitle"
          label="流程名称">
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="流程发起人"
          >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="匹配发起时间"
          >
        </el-table-column>
        <el-table-column
          prop="completeTime"
          label="匹配结束时间"
          >
        </el-table-column>
        <el-table-column label="操作" prop="status" align="center" width="150" >
          <template slot-scope="scope">
            <el-link type="primary"  @click="newWindowBpm(scope.row.instId,'1')">查看流程</el-link>
          </template>
        </el-table-column>
      </el-table>
    </card>



  </div>
</template>

<script>
  import card from "@/components/Card/index";
  import { getDetailInfoApi, getContractListApi, getMoneyApi, addAndUpdateApi ,getProcessList} from '@/api/paymentManger/payApply'
  import { newWindowBpm } from "@/utils/openBpm";
  import {getCurrentDate} from "@/utils/dateUtils";
  import FileUpload from '@/views/components/fileUpload/index.vue'
  import Index from "./index";
  import {getToken} from "@/utils/auth";
  import BaseIndex from "@/views/base/BaseIndex";
  export default {
    name: "payApplyDetail",
    components:{ card ,FileUpload},
    extends:BaseIndex,
    data(){
      return {
        newWindowBpm,
        bpmDataList:[],
        editable:false,//是否可编辑
        option:{
          label: "项目名称",
          prop: "projectName",
          type: "selectData",
          searchKey: "projectName",
          span: 8,
          url: `${process.env.VUE_APP_BASE_API}/pigfarm-project/like`,
          props: {
            label: "projectName",
            value: "projectId"
          },
          createdRequest: false,
          searchIconVisible:true,
          filterAble:false,
          selectAble: true,
          getDictSuccessStatus:0,
          getDictResultMap:{
            status:'data.code',
            data:'data.data',
            list:'data.data.records',
            total:'data.data.total',
          },
          dialogType:2,
          labelFields:['pigfarmName','pigfarmNumber','projectName','projectNumber'],
          labelFieldsName:['猪场名称','猪场编号','项目名称','项目编号'],
          searchLabel:['projectName'],
          searchLabelName:['项目名称'],
          headers:{
            Authorization:'Bearer '+getToken()
          },
          projectId:'',
          listeners: {
            dataChange: val => {
              if (val){
                this.baseData.payType = '3'
                const { pigfarmId, pigfarmName, pigfarmNumber, projectId,projectName, projectNumber } = val;
                this.projectId = projectId
                this.baseData.projectId = projectId;
                this.baseData.projectName = projectName;
                this.baseData.projectNumber = projectNumber;
                this.baseData.pigfarmId = pigfarmId;
                this.baseData.pigfarmNumber = pigfarmNumber;
                this.baseData.pigfarmName = pigfarmName;
                this.baseData.contractTitle = "";//重置合同
                this.baseData.contractMoney = "";//重置合同金额
                this.baseData.companyId = "";//重置合同甲方
                this.baseData.companyName = "";//重置合同甲方
                this.baseData.leCode = "";//重置合同乙方
                this.baseData.supplierName = "";//重置合同乙方
                this.baseData.bankAccountName = "";//重置账户名称
                this.baseData.bankAccount = "";//重置账户名称
                this.baseData.bankName = "";//重置开户银行
                this.baseData.bankCode = "";//重置银行行号
                this.baseData.totalApply = "";//重置累计申请金额
                this.baseData.totalPaid = "";//重置已支付金额
                this.getContractList(projectId,this.baseData.contractTitle);
              }
            }
          }
        },
        baseData:{
          fileList:[],
          projectId: "",
          projectName: "",
          projectNumber: "",
          pigfarmId: "",
          pigfarmName: "",
          pigfarmNumber: "",
          contractId:"",
          contractTitle:"",
          contractType:"",
          payType:"3",
          contractMoney:"",
          companyId:"",
          companyName:"",
          leCode:"",
          supplierName:"",
          bankAccountName:"",
          bankAccount:"",
          bankName:"",
          bankCode:"",
          remark:"",
          thisMoney:"",
          totalApply:"",
          totalPaid:"",
          actualMoney:"",
        },
        contractList:[],//合同列表
      }
    },

    created(){
      const { type, id } = this.$route.query;
      this.editable = type === 'view';
      if(id){
        this.getDetailInfo(id);
      }
    },
    methods:{
      handelChangePayType(e){

        if (this.projectId) {
          if (e == '1' || e == '2') {
            getProcessList(e,this.projectId).then(
              response => {
                if(response && response.code ===0){

                  this.bpmDataList = response.data

                }else{
                  this.msgError(response.msg)
                }

              }
            ).catch((err) => {

            })
          }else{
            this.bpmDataList = []
          }
        }else{
          this.msgError('请先选择项目')
        }
      },

      /**
       * 获取详情
       */
      getDetailInfo(id){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getDetailInfoApi(id).then(res => {
          console.log('详情:',res);
          loading.close();
          if(res.code === 0){

            this.bpmDataList = res.data.bpmList
            if (res.data.fileList == null) {
              res.data.fileList = []
            }
            this.baseData = res.data;
            const { status } = res.data;
            if(this.$route.query.type==="view"){
              this.editable = true;
            }else{
              //设置编辑状态(暂存 || 退回、驳回 ||作废状态可编辑)
              if(!status || status === 'save' || status === 'reject' || status === 'cancel'){
                this.editable = false;
              }else{
                this.editable = true;
              }
            }
          }else{
            this.$message.warning(res.msg);
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },


      /**
       * 获取合同列表
       */
      getContractList(projectId,contractTitle){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getContractListApi(projectId,contractTitle).then(res => {
          console.log('合同列表:',res);
          loading.close();
          if(res.code === 0){
            this.contractList = res.data;
          }else{
            this.$message.warning(res.msg);
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },

      /**
       * 获取合同累计申请金额&&已支付金额
       */
      getMoney(contractId){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getMoneyApi(contractId).then(res => {
          console.log('合同累计申请金额&&已支付金额:',res);
          loading.close();
          if(res.code === 0){
            const { totalApply, totalPaid } = res.data;
            this.baseData.totalApply = totalApply;
            this.baseData.totalPaid = totalPaid;
          }else{
            this.$message.warning(res.msg);
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },


      /**
       * 数据校验
       */
      checkData(){
        const { projectName, contractTitle, contractType, payType, remark, thisMoney } = this.baseData;
        // debugger
        if(!projectName){
          this.$message.warning("请选择项目!");
          return false;
        }else if(!contractTitle){
          this.$message.warning("请选择合同!");
          return false;
        }else if(contractType===""){
          this.$message.warning("请选择合同类型!");
          return false;
        }else if(payType===""){
          this.$message.warning("请选择付款类型!");
          return false;
        }else if(remark===""){
          this.$message.warning("请填写摘要信息!");
          return false;
        }else if(thisMoney===""){
          this.$message.warning("请填写本次申请金额!");
          return false;
        }else{
          return true
        }
      },

      /**
       * 提交
       */
      handleSave(){
        const status = this.checkData();
        if(status){
          const { type } = this.$route.query;
          console.log('baseData:',this.baseData);
          this.baseData['bpmList'] = this.bpmDataList
          const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
          addAndUpdateApi(type,this.baseData).then(res => {
            console.log('新增:',res);
            loading.close();
            if(res.code === 0){
              this.$message.success("提交成功");
              newWindowBpm(res.data,true,{path:`/payApply/index`},true, Index);
            }else{
              this.$message.warning(res.msg);
            }
          }).catch(error => {
            console.log('error:',error);
            loading.close();
          })
        }
      },


      /**
       * 合同change事件
       */
      handleContractChange(val){
        const obj = this.contractList.find(item => {
          return item.id === val;
        });
        const { contractTitle, companyId, companyName, leCode,supplierName, contractMoney, bankAccountName, bankAccount, bankName, bankCode,contractType } = obj;
        this.baseData.contractId = val;
        this.baseData.contractTitle = contractTitle;
        this.baseData.companyId = companyId;
        this.baseData.companyName = companyName;
        this.baseData.leCode = leCode;
        this.baseData.supplierName = supplierName;
        this.baseData.contractMoney = contractMoney;
        this.baseData.bankAccountName = bankAccountName;
        this.baseData.bankAccount = bankAccount;
        this.baseData.bankName = bankName;
        this.baseData.bankCode = bankCode;
        this.baseData.contractType = contractType;
        this.getMoney(val);
      },

      /**
       * 输入框框blue事件
       */
      handleBlur(){
        let { thisMoney } = this.baseData;
        thisMoney = parseFloat(thisMoney).toFixed(2);
        if(thisMoney>999999999999){
          this.$message.warning("最大值不得超出999999999999请重新输入");
          this.baseData.thisMoney = null;
        }else{
          this.baseData.thisMoney = thisMoney;
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/form"; //table样式
  .container {
    .header-box{
      display: flex;
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 20px;
      box-sizing: border-box;
      .left{
         display: flex;
         justify-content: flex-start;
         align-items: center;
         width: 20%;
       }
      .right{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 80%;
      }
    }
    .tool-box{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 5px;
    }
  }
</style>
